<template>
  <div class="index_list_panel2">
    <div class="panel-content" :style="panelStyle">
      <div
        v-for="(item, index) in data"
        :key="item.name + index"
        class="list-box"
        :class="{ 'un-auto-fit': !autoFit }"
      >
        <template v-if="autoFit">
          <div class="bg-container">
            <div class="bg-left"></div>
            <div class="bg-center"></div>
            <div class="bg-right"></div>
          </div>
        </template>
        <div class="name">{{ item.name }}</div>
        <div class="value-unit">
          <div class="value">{{ item.value }}</div>
          <div class="unit">{{ item.unit }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'indexListPanel2',
    props: {
      // 数据内容
      data: {
        type: Array,
        default: () => [
          { name: '线网密度', value: '132', unit: 'km/km²' },
          { name: '线路总里程', value: '22', unit: '公里' },
          { name: '线路重复系数', value: '45', unit: '' },
          { name: '线路非直线系数', value: '35', unit: '' },
          { name: '站点面积覆盖率', value: '26', unit: '%' },
          { name: '运营车辆数', value: '12', unit: '辆' },
        ],
      },
      /**
       * 列数
       */
      span: {
        type: Number,
        default: () => 0,
      },
      /**
       * 是否自适应
       */
      autoFit: {
        type: Boolean,
        default: false,
      },
      /**
       * 间隔
       */
      columnGap: {
        type: Number,
        default: 10,
      },
      /**
       * 行间隔
       */
      rowGap: {
        type: Number,
        default: 18,
      },
    },
    data() {
      return {}
    },
    computed: {
      /**
       * 面板样式
       */
      panelStyle() {
        return {
          columnGap: this.columnGap + 'px',
          rowGap: this.rowGap + 'px',
          '--indexListPanel2GridColumns': this.autoFit
            ? this.span
            : 'auto-fill',
        }
      },
    },
    created() {},
    methods: {},
  }
</script>
<style lang="scss" scoped>
  .index_list_panel2 {
    width: 100%;

    .panel-content {
      display: grid;
      grid-template-columns: repeat(
        var(--indexListPanel2GridColumns),
        minmax(122px, 1fr)
      );
      width: 100%;

      & > .list-box {
        position: relative;
        min-width: 122px;

        // &.un-auto-fit {
        //   background-image: url(./assets/bg.png);
        //   background-repeat: no-repeat;
        //   background-position: bottom center;
        //   background-size: 100% 31px;
        // }

        & > .bg-container {
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          display: flex;
          width: 100%;
          height: 100%;

          // & > .bg-left {
          //   width: 20px;
          //   height: 100%;
          //   background-image: url(./assets/bg-left.png);
          //   background-repeat: no-repeat;
          //   background-position: bottom center;
          // }

          // & > .bg-center {
          //   flex: 1;
          //   height: 100%;
          //   background-image: url(./assets/bg-repeat.png);
          //   background-repeat: repeat-x;
          //   background-position: bottom center;
          // }

          // & > .bg-right {
          //   width: 20px;
          //   height: 100%;
          //   background-image: url(./assets/bg-right.png);
          //   background-repeat: no-repeat;
          //   background-position: bottom center;
          // }
        }

        & > .name {
          font-family: PingFang SC;
          font-size: 16px;
          line-height: 26px;
          color: #fff;
          text-align: center;
          letter-spacing: 0.6px;
          font-weight: 600;
          background-color: #81d3f8;
        }

        & > .value-unit {
          display: flex;
          flex-direction: row;
          justify-content: center;
          text-align: center;
          border: 1px solid #81d3f8;

          & > .value {
            font-family: D-DIN-Bold;
            font-size: 24px;
            font-weight: bold;
            line-height: 44px;
            color: #ffd547;
            text-align: center;
            letter-spacing: normal;
          }

          & > .unit {
            margin-left: 4px;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: normal;
            line-height: 24px;
            color: #06fefe;
            text-align: center;
            letter-spacing: normal;
          }
        }
      }
    }
  }
</style>
